<template>
    <div class="line-chart">
        <div class="line-chart-box">
            <div class="chart-wdescription">
                <p class="chart-title">{{'实时平均价走势图'}}</p>
                <p class="chart-description">{{lineChart.list && lineChart.list.length >= 10 ?  '已去掉10%的最高价和10%的最低价': ''}}</p>
            </div>
            <div class="line-chart-wrap" v-if="lineChart.list && lineChart.list.length > 0">
                <div :style="{width: .5 * lineChart.list.length +'rem'}" id="container" class="line-chart-container"></div>
            </div>
            <div class="chart-no-data displayFlex flexCenter" v-else>
                <p class="text-center">暂无数据</p>
            </div>
        </div>
    </div>
</template>

<script>
    import Highcharts from 'highcharts/highstock';

    export default {
        name: "HighCharts",
        props:{
            lineChartProp:Object
        },
        data() {
            return {
                lineChart:{
                    // list:[
                    //     {
                    //         time:11111111111,
                    //         chartValue:'100',
                    //     }
                    // ]
                },
                option:{
                    /*边框的样式*/
                    chart: {
                        type: 'spline',
                        // spacingBottom: 30,
                        backgroundColor: null,
                        panning: true,
                        pinchType: 'x',
                        resetZoomButton: {
                            position: {
                                y: -1000
                            }
                        }
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: '',//次标题
                    },
                    /*图例*/
                    legend: {
                        enabled: false,//是否显示
                    },
                    /*x轴*/
                    xAxis: {
                        // tickPixelInterval: 1000,//刻度
                        tickLength: 0,
                        minPadding:30 ,
                        /*坐标轴文字以及样式*/
                        labels: {
                            rotation:0,
                            formatter: function () {
                                return this.value
                            },
                            style: {
                                color: '#fff',
                                fontSize:'10px',
                                fontFamily:'微软雅黑',
                            }
                        },

                        categories:['03-111', '03-dfsdf', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21', '03-22', '03-23', '03-24'],//
                        // formatter:function(){
                        //     return this.value;
                        // }
                    },
                    /*y轴*/
                    yAxis: {
                        tickPixelInterval: 5,//刻度
                        title: {
                            text: ''
                        },
                        /*坐标轴文字以及样式*/
                        labels: {
                            formatter: function () {
                                return null
                            },
                        },
                        lineWidth: 1,
                        lineColor: 'rgba(255,255,255,.4)',
                        gridLineWidth: 1,
                        gridLineColor: 'rgba(255,255,255,.4)',
                        // gridLineDashStyle: 'longdash'
                    },
                    /*提示框设置*/
                    tooltip: {
                        followTouchMove: false,
                        // backgroundColor: 'transparent',   // 背景颜色
                        // borderColor: '#FFB516',         // 边框颜色
                        // borderRadius: 10,             // 边框圆角
                        // borderWidth: 2,               // 边框宽度
                        // shadow: false,                 // 是否显示阴影
                        // animation: true,               // 是否启用动画效果
                        // style: {                      // 文字内容相关样式
                        //     color: "#fff",
                        //     fontSize: "10px",
                        // }
                    },
                    /*线条的设置*/
                    plotOptions: {
                        enabled: true,
                        spline: {
                            // color:'#rgba(255, 186, 0, 0.2)',
                            lineColor: '#fff',
                            fillOpacity: 0.2,
                            dataLabels: {
                                // 开启数据标签
                                enabled: true,
                                /*数据标签样式*/
                                style: {
                                    color: "#FDD909",
                                    fontFamily: "宋体",
                                    fontSize: '.13rem',
                                    textOutline: "none",
                                },
                                // formatter: function () {
                                //     return `${this.x} ${this.y}`;
                                // },

                            },
                            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                            enableMouseTracking: false
                        },
                        series: {
                            connectNulls: true,
                            stickyTracking: false,
                            allowPointSelect: true,
                            marker: {
                                states: {
                                    select: {
                                        lineColor: 'rgba(255, 170, 28, 0.5)',
                                        fillColor: 'rgb(255, 170, 28)',
                                        lineWidth: 6,
                                        radius: 5
                                    }
                                }
                            }
                        },
                        area: {
                            fillOpacity: 0
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    // scrollbar: {
                    //     enabled: true
                    // },
                    series: [
                        {
                        // style: {
                        //     color: '#FFF',
                        //     fontSize: "12px",
                        // },
                        // pointStart: Date.UTC(2010, 0, 1),
                        // pointInterval: 3600 * 1000, // one hour
                        data:
                        [
                            // {y: 79166.17, color: '#fff'},
                        ]
                    }],
                    function(c) {
                        // 动态改变 x 轴范围即可实现拖动
                        c.xAxis[0].setExtremes(1, 2);
                    }
                },
                categories:[],
            }
        },
        mounted() {
            let that = this;
            this.lineChart = Object.assign({},this.lineChart,this.lineChartProp);
            let tempObj = {};
            let categories = [];
            let seriesData = [];
            if(this.lineChart.list){
                let lineChartLength = this.lineChart.list.length ;
                this.lineChart.list.forEach((value,index)=>{
                    categories.push(that.getTime(Number(value.time)).slice(10));
                    if( lineChartLength - 1 == index ){
                        tempObj = {
                            y:Number(value.chartValue),
                            color:'#FFEA00',
                        };
                    }else{
                        tempObj = {
                            y:Number(value.chartValue),
                            color:'#fff',
                        };
                    }
                    seriesData.push(tempObj);
                })
            }
            this.option.xAxis.categories = categories;
            this.option.series[0].data = seriesData;
            if(this.lineChart.list && this.lineChart.list.length > 0){
                setTimeout(()=>{
                    this.initChart(this.option);
                },10)
            }
        },
        methods:{
            initChart(option){
                var chart = Highcharts.chart('container', option);
                if( .5 * this.lineChart.list.length > 3.56 ){
                    $('.line-chart-container')[0].scrollLeft = .5 * this.lineChart.list.length - 3.56 +'rem'
                }
            }
        },
        watch:{
            lineChartProp(val){
                let that = this;
                this.lineChart = Object.assign({},this.lineChart,val);
                let tempObj = {};
                let categories = [];
                let seriesData = [];
                if(this.lineChart.list && this.lineChart.list.length > 0){
                    let lineChartLength = this.lineChart.list.length ;
                    this.lineChart.list.forEach((value,index)=>{
                        categories.push(that.getTime(Number(value.time)).slice(10));
                        if( lineChartLength - 1 == index ){
                            tempObj = {
                                y:Number(value.chartValue),
                                color:'#FFEA00',
                            };
                        }else{
                            tempObj = {
                                y:Number(value.chartValue),
                                color:'#fff',
                            };
                        }
                        seriesData.push(tempObj);
                    })
                }
                this.option.xAxis.categories = categories;
                this.option.series[0].data = seriesData;
                if(this.lineChart.list && this.lineChart.list.length > 0){
                    setTimeout(()=>{
                        this.initChart(this.option);
                    },10)
                }
            }
        }
    }
</script>

<style scoped lang="scss">

    .line-chart {
        width: 100%;
        overflow: auto;
        padding: .16rem;
    }

    .line-chart-container,.chart-no-data {
        height: 1.82rem;
        margin-top: .3rem;
    }
    .chart-no-data{
        color: rgba(255,255,255,.4);
    }
    .chart-wdescription{
        padding: 0 .06rem;
    }
    .line-chart-box {
        -webkit-border-radius: .08rem;
        -moz-border-radius: .08rem;
        border-radius: .08rem;
        width: 100%;
        padding: .16rem .1rem;
        background-color: rgba(0, 0, 0, .4);
    }

    .chart-title {
        font-size: .18rem;
        color: #fff;
    }

    .chart-description {
        padding-top: .03rem;
        font-size: .11rem;
        color: rgba(255, 255, 255, .4);
    }
    .line-chart-wrap{
        overflow: auto;
    }
</style>